<template>
  <div class="knowledge-stat-container">
    <div class="page-header">
      <h2>知识库统计分析</h2>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="handleDateChange"
        />
        <el-button type="primary" @click="refreshData">刷新数据</el-button>
        <el-button @click="exportData">导出报表</el-button>
      </div>
    </div>

    <div class="content-wrapper">
      <!-- 统计卡片 -->
      <div class="stat-cards">
        <el-row :gutter="20">
          <el-col :span="6" v-for="card in statCards" :key="card.title">
            <el-card class="stat-card" :body-style="{ padding: '20px' }">
              <div class="stat-card-content">
                <div class="stat-icon" :style="{ backgroundColor: card.color }">
                  <el-icon><component :is="card.icon" /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-value">{{ card.value }}</div>
                  <div class="stat-title">{{ card.title }}</div>
                  <div class="stat-change" :class="card.trend">
                    <el-icon>
                      <component :is="card.trend === 'up' ? 'ArrowUp' : 'ArrowDown'" />
                    </el-icon>
                    {{ card.change }}%
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 图表区域 -->
      <div class="charts-section">
        <el-row :gutter="20">
          <!-- 访问趋势图 -->
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <div class="chart-header">
                  <span>访问趋势</span>
                  <el-select v-model="trendPeriod" size="small" style="width: 100px">
                    <el-option label="7天" value="7" />
                    <el-option label="30天" value="30" />
                    <el-option label="90天" value="90" />
                  </el-select>
                </div>
              </template>
              <div class="chart-container" ref="trendChartRef"></div>
            </el-card>
          </el-col>

          <!-- 分类分布图 -->
          <el-col :span="12">
            <el-card class="chart-card">
              <template #header>
                <span>分类分布</span>
              </template>
              <div class="chart-container" ref="categoryChartRef"></div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 热门内容排行 -->
      <div class="ranking-section">
        <el-card class="ranking-card">
          <template #header>
            <span>热门内容排行</span>
          </template>
          <el-table :data="hotContentRanking" style="width: 100%">
            <el-table-column prop="rank" label="排名" width="80">
              <template #default="{ row }">
                <span class="rank-number" :class="`rank-${row.rank}`">{{ row.rank }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="category" label="分类" width="120" />
            <el-table-column prop="views" label="浏览量" width="100" />
            <el-table-column prop="likes" label="点赞数" width="100" />
            <el-table-column prop="updateTime" label="更新时间" width="180" />
          </el-table>
        </el-card>
      </div>

      <!-- 用户行为分析 -->
      <div class="behavior-section">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-card class="behavior-card">
              <template #header>
                <span>搜索关键词</span>
              </template>
              <div class="keyword-list">
                <div 
                  v-for="keyword in topKeywords" 
                  :key="keyword.word" 
                  class="keyword-item"
                >
                  <span class="keyword-word">{{ keyword.word }}</span>
                  <span class="keyword-count">{{ keyword.count }}次</span>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card class="behavior-card">
              <template #header>
                <span>用户反馈</span>
              </template>
              <div class="feedback-stats">
                <div class="feedback-item">
                  <span class="feedback-label">有帮助</span>
                  <span class="feedback-value positive">{{ feedbackStats.helpful }}</span>
                </div>
                <div class="feedback-item">
                  <span class="feedback-label">无帮助</span>
                  <span class="feedback-value negative">{{ feedbackStats.unhelpful }}</span>
                </div>
                <div class="feedback-item">
                  <span class="feedback-label">满意度</span>
                  <span class="feedback-value">{{ feedbackStats.satisfaction }}%</span>
                </div>
              </div>
            </el-card>
          </el-col>

          <el-col :span="8">
            <el-card class="behavior-card">
              <template #header>
                <span>访问时段分布</span>
              </template>
              <div class="time-distribution">
                <div 
                  v-for="timeSlot in timeDistribution" 
                  :key="timeSlot.hour" 
                  class="time-slot"
                >
                  <span class="time-hour">{{ timeSlot.hour }}:00</span>
                  <div class="time-bar">
                    <div 
                      class="time-bar-fill" 
                      :style="{ width: timeSlot.percentage + '%' }"
                    ></div>
                  </div>
                  <span class="time-percentage">{{ timeSlot.percentage }}%</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Document, 
  View, 
  Star, 
  User, 
  ArrowUp, 
  ArrowDown 
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 响应式数据
const dateRange = ref<[string, string]>(['', ''])
const trendPeriod = ref('7')
const trendChartRef = ref()
const categoryChartRef = ref()

// 统计卡片数据
const statCards = ref([
  {
    title: '总文章数',
    value: '1,234',
    change: 12.5,
    trend: 'up',
    color: '#409EFF',
    icon: Document
  },
  {
    title: '总浏览量',
    value: '45,678',
    change: 8.3,
    trend: 'up',
    color: '#67C23A',
    icon: View
  },
  {
    title: '总点赞数',
    value: '3,456',
    change: -2.1,
    trend: 'down',
    color: '#E6A23C',
    icon: Star
  },
  {
    title: '活跃用户',
    value: '789',
    change: 15.7,
    trend: 'up',
    color: '#F56C6C',
    icon: User
  }
])

// 热门内容排行
const hotContentRanking = ref([
  {
    rank: 1,
    title: '如何快速上手系统操作',
    category: '操作指南',
    views: 1234,
    likes: 89,
    updateTime: '2024-01-15 10:30:00'
  },
  {
    rank: 2,
    title: '常见问题解决方案汇总',
    category: '常见问题',
    views: 1156,
    likes: 76,
    updateTime: '2024-01-14 14:20:00'
  },
  {
    rank: 3,
    title: '系统故障排除指南',
    category: '故障排除',
    views: 987,
    likes: 65,
    updateTime: '2024-01-13 09:15:00'
  },
  {
    rank: 4,
    title: '新功能介绍与使用说明',
    category: '新功能',
    views: 856,
    likes: 54,
    updateTime: '2024-01-12 16:45:00'
  },
  {
    rank: 5,
    title: '高级功能使用技巧',
    category: '操作指南',
    views: 745,
    likes: 43,
    updateTime: '2024-01-11 11:20:00'
  }
])

// 搜索关键词
const topKeywords = ref([
  { word: '登录问题', count: 156 },
  { word: '密码重置', count: 134 },
  { word: '订单查询', count: 98 },
  { word: '支付问题', count: 87 },
  { word: '退货流程', count: 76 },
  { word: '客服联系', count: 65 },
  { word: '账户安全', count: 54 },
  { word: '功能使用', count: 43 }
])

// 用户反馈统计
const feedbackStats = ref({
  helpful: 1234,
  unhelpful: 89,
  satisfaction: 93.3
})

// 访问时段分布
const timeDistribution = ref([
  { hour: 0, percentage: 5 },
  { hour: 2, percentage: 3 },
  { hour: 4, percentage: 2 },
  { hour: 6, percentage: 8 },
  { hour: 8, percentage: 15 },
  { hour: 10, percentage: 18 },
  { hour: 12, percentage: 12 },
  { hour: 14, percentage: 16 },
  { hour: 16, percentage: 14 },
  { hour: 18, percentage: 10 },
  { hour: 20, percentage: 8 },
  { hour: 22, percentage: 9 }
])

// 方法
const handleDateChange = (dates: [string, string]) => {
  console.log('日期范围变化:', dates)
  // 根据日期范围重新获取数据
}

const refreshData = () => {
  ElMessage.success('数据已刷新')
  // 重新获取数据
}

const exportData = () => {
  ElMessage.success('报表导出成功')
  // 导出报表逻辑
}

// 初始化图表
const initCharts = async () => {
  await nextTick()
  
  // 访问趋势图
  if (trendChartRef.value) {
    const trendChart = echarts.init(trendChartRef.value)
    const trendOption = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: ['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '浏览量',
          type: 'line',
          smooth: true,
          data: [120, 132, 101, 134, 90, 230, 210],
          itemStyle: {
            color: '#409EFF'
          }
        }
      ]
    }
    trendChart.setOption(trendOption)
  }

  // 分类分布图
  if (categoryChartRef.value) {
    const categoryChart = echarts.init(categoryChartRef.value)
    const categoryOption = {
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          name: '分类分布',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 35, name: '操作指南' },
            { value: 25, name: '常见问题' },
            { value: 20, name: '故障排除' },
            { value: 15, name: '新功能' },
            { value: 5, name: '其他' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }
    categoryChart.setOption(categoryOption)
  }
}

// 生命周期
onMounted(() => {
  // 设置默认日期范围为最近30天
  const end = new Date()
  const start = new Date()
  start.setDate(start.getDate() - 30)
  dateRange.value = [
    start.toISOString().split('T')[0],
    end.toISOString().split('T')[0]
  ]
  
  initCharts()
})
</script>

<style scoped>
.knowledge-stat-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.content-wrapper {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 统计卡片样式 */
.stat-cards {
  margin-bottom: 30px;
}

.stat-card {
  margin-bottom: 20px;
}

.stat-card-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  color: white;
  font-size: 24px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 4px;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-change {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.stat-change.up {
  color: #67C23A;
}

.stat-change.down {
  color: #F56C6C;
}

/* 图表区域样式 */
.charts-section {
  margin-bottom: 30px;
}

.chart-card {
  margin-bottom: 20px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-container {
  height: 300px;
}

/* 排行榜样式 */
.ranking-section {
  margin-bottom: 30px;
}

.rank-number {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  font-weight: bold;
  color: white;
}

.rank-1 { background-color: #FFD700; }
.rank-2 { background-color: #C0C0C0; }
.rank-3 { background-color: #CD7F32; }
.rank-4, .rank-5 { background-color: #909399; }

/* 行为分析样式 */
.behavior-section {
  margin-bottom: 20px;
}

.behavior-card {
  margin-bottom: 20px;
}

.keyword-list {
  max-height: 200px;
  overflow-y: auto;
}

.keyword-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.keyword-item:last-child {
  border-bottom: none;
}

.keyword-word {
  color: #303133;
}

.keyword-count {
  color: #909399;
  font-size: 12px;
}

.feedback-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feedback-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedback-label {
  color: #606266;
}

.feedback-value {
  font-weight: bold;
}

.feedback-value.positive {
  color: #67C23A;
}

.feedback-value.negative {
  color: #F56C6C;
}

.time-distribution {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.time-slot {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-hour {
  width: 60px;
  font-size: 12px;
  color: #606266;
}

.time-bar {
  flex: 1;
  height: 8px;
  background-color: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.time-bar-fill {
  height: 100%;
  background-color: #409EFF;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.time-percentage {
  width: 40px;
  font-size: 12px;
  color: #909399;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .header-actions {
    justify-content: center;
  }
  
  .stat-cards .el-col {
    margin-bottom: 16px;
  }
  
  .charts-section .el-col {
    margin-bottom: 20px;
  }
}
</style>
